<template>
    <el-menu :default-active="active" :default-openeds="openName" :router="true" >
        <el-submenu v-if="siderMenu.show && !prohibition.includes(siderMenu.name)" v-for="siderMenu in siderList" :index='siderMenu.name' >
            <template slot="title">
                <span>{{ $t('sider.'+siderMenu.name)}}</span>

            </template>

            <el-menu-item v-if="siderItem.show && !prohibition.includes(siderItem.name)" v-for="siderItem in siderMenu.children" :index="siderItem.name"  :route="{path:siderItem.path}">
                <span>{{ $t('sider.'+siderItem.name)}}</span>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
import {sider as siderLists } from '../../router/config'
import {permission} from "../../config";
import bus from '../../utils/bus'
import {mapMutations} from 'vuex'
    export default {
        data () {
            return {
                isCollapsed: false,
                active:'',
                openName:[],
                siderList:siderLists,
                prohibition:[]
            }
        },
        computed: {
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            },
        },
        methods: {
            ...mapMutations(["saveOpenPage"]),
            collapsedSider () {
                this.$refs.side.toggleCollapse();
            },
            checkoutPermission(){
                let ignore = ["login"]
                let userType = window.localStorage.getItem('userType')
                if(userType !== '0' && !userType){

                }else{
                    this.prohibition =  permission.userType[userType].prohibition
                }
            },
        },
        created(){
            this.active = this.$route.name;
            this.openName = [this.$route.matched[0].name]
            this.saveOpenPage(this.$route.path)
            bus.$on('login', (val) => {
                setTimeout(() => {
                    this.checkoutPermission()
                }, 0)
            })
        },
        mounted(){
            this.checkoutPermission()
        },
        watch:{
            '$route'(to, from) {
                this.active = to.name;
                this.saveOpenPage(to.path)
            }
        }
    }
</script>

<style scoped>
    .el-submenu .is-active{
        background-color: #ecf5ff;
    }

</style>